<template>
    <div
            id="ConsoleNet"
            style="width: 100%; height: 100%; background: #ffffff; text-align: center"
    >
        <div
                ref="ConsoleNet"
                :style="{ width:'100%',height:'100%' }"
        ></div>
    </div>
</template>

<script>

    import * as echarts from "echarts";

    export default {
        name: 'ConsoleNet',
        data() {
            return {
                chart: null,
                option: {
                    xAxis: [{type: 'value'}],
                    yAxis: [{type: 'category', data: []}],
                    title: {
                        show: true,
                        text: '磁盘',
                        left: 'center',
                        top: 20
                    },
                    grid: {
                        show: true,
                        right: '30px',
                        containLabel: true
                    },
                    series: [],
                    legend: {
                        left: 'center',
                        bottom: '15px'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: (data) => {
                            console.log(data)
                            let relVal = "";
                            for (let i = 0; i < data.length; i++) {
                                relVal += data[i].marker + data[i].seriesName + ":" + data[i].value.toFixed(2) + "GB"
                                if (i < data.length - 1) {
                                    relVal += "</br>";
                                }
                            }
                            return relVal;
                        }
                    }
                },
            }
        },
        mounted() {
            this.initChart();
            this.$nextTick((_) => {
                setTimeout(() => {
                    this.chart.resize()
                }, 100)
            })
        },
        unmounted() {
        },
        methods: {
            setData: function (data) {
                console.log("data", data);
                let yLabel = [];
                let series = [];
                data.forEach((item) => {
                    yLabel.push(item.path);
                    series.push({
                            barWidth: 30,
                            name: '剩余',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.free]
                        },
                        {
                            barWidth: 30,
                            name: '已使用',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.use]
                        });
                });
                this.option.yAxis[0].data = yLabel;
                this.option.series = series;
                this.chart.setOption(this.option);

            },
            initChart() {
                this.chart = markRaw(echarts.init(this.$refs.ConsoleNet));
            }
        },
    }
</script>
